<template>
  <div>
    <el-row>
      <el-col>
        <cs-table :table-data="currentTableData"
                  :table-label="tableLabel"
                  @handleButton="handleButton"
                  @handleSortChange="handleSortChange"
                  @handleSelectionChange="handleSelectionChange"
                  :table-option="tableOption"
                  :isSelection="false"
                  class="table">
          <template slot="enable" slot-scope="scope">
            <span v-if="scope.row.enable === '1'">已启用</span>
            <span v-else>未启用</span>
          </template>
          <!-- 合并策略 -->
          <template slot="strategy" slot-scope="scope">
            <span v-if="scope.row.strategy === 'today'">当天合并</span>
            <span v-else>周期合并</span>
          </template>
          <!-- 合并条件 -->
          <template slot="conditions">
            <div
              style="display: inline-block;"
              v-for="(item, index) in this.mergerConditions"
              :key="index">
              <span v-if="item === 'name'">告警名称</span>
              <span v-else-if="item === 'deviceIp'">设备地址</span>
              <span v-else-if="item === 'severity'">告警级别</span>
              <span v-else>设备类型</span>
            </div>
          </template>
          <!-- 合并条件end -->
        </cs-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNo"
          :page-sizes="[20, 40, 50, 60]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <el-drawer
      title="修改合并条件"
      size="55%"
      :visible.sync="drawer"
      :direction="direction"
      :modal="false"
      :before-close="handleClose"
      @open="handleOpen">
      <div>
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="告警来源">
            <span>{{form.source}}</span>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-radio-group v-model="form.enable">
              <el-radio label="1">启用</el-radio>
              <el-radio label="0">停用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="合并策略">
            <el-radio-group v-model="form.strategy" @change="handleChange">
              <el-radio label="today">当天合并</el-radio>
              <el-radio label="cycle">周期合并</el-radio>
            </el-radio-group>
          </el-form-item>
          <!-- 周期合并 -->
          <el-form-item label="合并周期" v-if="isShow">
            <el-input v-model="form.number" class="input-with-select" placeholder="请输入周期时间">
              <el-select v-model="form.timeType" slot="append" placeholder="请选择" class="cycleSelect">
                <el-option label="秒" value="s"></el-option>
                <el-option label="分钟" value="m"></el-option>
                <el-option label="小时" value="h"></el-option>
                <el-option label="天" value="d"></el-option>
              </el-select>
            </el-input>
            <span class="cycleSelectSpan">( 从产生告警到完成一次合并的时间间隔 )</span>
          </el-form-item>
          <!-- 周期合并end -->
          <el-form-item label="合并条件">
            <el-checkbox-group v-model="form.conditions">
              <el-checkbox label="name">告警名称</el-checkbox>
              <el-checkbox label="deviceIp">设备地址</el-checkbox>
              <el-checkbox label="severity">告警级别</el-checkbox>
              <el-checkbox label="deviceType">设备类型</el-checkbox>
              <!-- <el-checkbox label="关联规则ID" name="ID"></el-checkbox> -->
            </el-checkbox-group>
          </el-form-item>
          <div>
            <el-button @click="drawer = false">取消</el-button>
            <el-button type="primary" @click="submitForm">确定</el-button>
          </div>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  updateElarmMerge,
  ElarmMergeById
} from '@/api/alarm/alarmmerge.js'
import CsTable from '@/components/cs-table'
export default {
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      form: {
        id: '',
        source: '',
        enable: '',
        strategy: '',
        number: '',
        timeType: '',
        conditions: []
      },
      cycleInput: '',
      cycleSelect: '1',
      isShow: false,
      currentTableData: this.alarmMergeData,
      tableLabel: [
        { label: '告警来源', param: 'source', align: 'center', sortable: false, isShow: true, width: 250 },
        { label: '是否启用', param: 'enable', align: 'center', isShow: true, slot: true, width: 250 },
        { label: '合并策略', param: 'strategy', align: 'center', sortable: false, isShow: true, width: 250, slot: true },
        { label: '合并条件 ', param: 'conditions', align: 'center', sortable: false, isShow: true, slot: true }
      ],
      tableOption: {
        label: '修改',
        width: 200,
        options: [
          { label: '修改', type: 'primary', icon: 'el-icon-edit', methods: 'audit', auth: 'sys:group:update' }
        ]
      },
      pageNo: 1,
      pageSize: 20,
      total: 0
    }
  },
  props: {
    alarmMergeData: {
      type: Array
    },
    mergerConditions: {
      type: Array
    }
  },
  components: {
    CsTable
  },
  watch: {
    alarmMergeData: {
      handler(newValue, oldValue) {
        if (newValue !== oldValue) {
          this.currentTableData = newValue
        }
      },
      immediate: true
    }
  },
  methods: {
    // 点击表格内的按钮，根据ID查询数据
    handleButton(val) {
      ElarmMergeById(val.row.id).then((res) => {
        this.form = res.data
      })
      this.drawer = true
    },
    handleSortChange() {
    },
    handleSelectionChange() {
    },
    // 分页监听
    handleSizeChange() {
    },
    handleCurrentChange() {
    },
    // 抽屉盒子打开时回调
    handleOpen() {
      setTimeout(() => {
        this.handleChange()
      }, 100)
    },
    // 点击周期合并，显示输入框
    handleChange() {
      if (this.form.strategy === 'today') {
        this.isShow = false
      } else if (this.form.strategy === 'cycle') {
        this.isShow = true
      }
    },
    // 提交修改合并条件
    submitForm() {
      updateElarmMerge(this.form).then((res) => {
        if (res.code === 200) {
          this.$emit('updataTable')
        }
      })
      this.drawer = false
    },
    handleClose() {
      this.drawer = false
    }
  }
}
</script>

<style scoped>
  .table {
    margin: 10px 0;
  }
  .el-button {
    width: 250px;
    margin-left: 30px;
  }
  .input-with-select {
    width: 280px;
  }
  .cycleSelect {
    width: 90px;
  }
  .cycleSelectSpan {
    margin-left: 20px;
    color: #9d9d9d;
  }
</style>
